<template>
  <div style="background-color: white;height: 630px;padding-left: 10px;padding-top: 5px;margin-top: 10px">
  <h1>费用信息</h1>
    {{ruleForm.orderId}}
  <hr>
  <br>
  <br>
  <el-form :inline="true" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px" class="demo-ruleForm">
    <el-form-item label="运费单价" prop="pricecm" style="width: 300px">
      <el-input v-model="ruleForm.pricecm" type="number" @input="price()" ></el-input>
    </el-form-item>
    <el-form-item label="运费单价" prop="pricekg" style="width: 300px">
      <el-input v-model="ruleForm.pricekg" type="number" @input="price()"></el-input>
    </el-form-item>
    <el-form-item label="提货费" prop="pickCost" style="width: 300px">
      <el-input v-model="ruleForm.pickCost" type="number" @input="price()"></el-input>
    </el-form-item>
    <el-form-item label="装卸费" prop="loadCost" style="width: 300px" >
      <el-input v-model="ruleForm.loadCost" placeholder="单位：kg" type="number" @input="price()"></el-input>
    </el-form-item>
    <el-form-item label="包装费" prop="boxCost" style="width: 300px">
      <el-input v-model="ruleForm.boxCost" type="number" @input="price()"></el-input>
    </el-form-item>
    <el-form-item label="保险费" prop="safeCost" style="width: 300px" >
      <el-input v-model="ruleForm.safeCost" placeholder="单位：cm" type="number" @input="price()"></el-input>
    </el-form-item>
    <el-form-item label="运费总计" prop="tranCost" style="width: 300px"  >
      <el-input v-model="ruleForm.tranCost" placeholder="单位：cm" type="number" @input="price()"></el-input>
    </el-form-item>
    <el-form-item label="费用总价" prop="totalCost" style="width: 300px"  >
      <el-input v-model="ruleForm.totalCost" @input="price()" placeholder="单位：cm" type="number"></el-input>
    </el-form-item>
    <el-form-item label="支付方式" prop="payWay" style="width: 300px" >
      <template>
        <el-select v-model="ruleForm.payWay" placeholder="请选择" style="width: 205px">
          <el-option
            v-for="item in payWays"
            :key="item.typeId"
            :label="item.typeName"
            :value="item.typeId">
          </el-option>
        </el-select>
      </template>

    </el-form-item>
    <el-form-item label="预付款" prop="earlyPay" style="width: 300px">
      <el-input v-model="ruleForm.earlyPay" type="number"></el-input>
    </el-form-item>
    <el-form-item label="代收金额" prop="replacePay" style="width: 300px">
      <el-input v-model="ruleForm.replacePay" type="number"></el-input>
    </el-form-item>

    <br>
    <el-form-item label="银行账户信息" prop="accoutInfo">
      <el-input type="textarea" v-model="ruleForm.accoutInfo" style="width: 1000px"></el-input>
    </el-form-item>
    <el-form-item>
      <br>
      <br>

      <div class="bbb">
        <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </div>

    </el-form-item>
  </el-form>
  </div>
</template>

<script>
    export default {
        name: "rbasicinfo",
      data(){
        return {
          payWays:[
            {
              typeName:'寄付',
              typeId:0
            },
            {
              typeName:'到付',
              typeId:1
            }
          ],
          ruleForm: {
            orderId: '',
            pricecm: '',
            pricekg: '',
            pickCost: '',
            loadCost: '',
            boxCost: '',
            safeCost: '',
            tranCost:'',
            totalCost: '',
            payWay: '',
            accoutInfo: '',
            earlyPay: '',
            replacePay: ''
          },
          totalBulk:50,
          totalWeight:50,
          rules: {
            pricecm: [
              { required: true, message: '请输入运费价格', trigger: 'blur' },
              { min: 1, max: 10, message: '长度在 3 到 5 个字符', trigger: 'blur' }
            ],
            pricekg: [
              { required: true, message: '请输入运费价格', trigger: 'blur' },
              { min: 1, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
            ],
            pickCost: [
              { required: true, message: '请输入提货费', trigger: 'blur' },
              { min: 1, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
            ],
            loadCost: [
              { required: true, message: '请输入装卸费', trigger: 'blur' }
            ],
            boxCost: [
              { required: true, message: '请输入包装费', trigger: 'blur' },

            ],
            safeCost: [
              { required: true, message: '请输入保险费', trigger: 'blur' },
              { min: 1, max: 5, message: '长度在 1 到 5 个字符', trigger: 'blur' }
            ],
            payWay: [
              { required: true, message: '请输入支付方式', trigger: 'blur' },

            ],
            accoutInfo: [
              { required: true, message: '请输入银行信息', trigger: 'blur' },

            ],
            earlyPay: [
              { required: true, message: '请输入预付款', trigger: 'blur' },

            ],
            replacePay: [
              { required: true, message: '请输入代付金额', trigger: 'blur' },
            ]

          }
        }
      },
      methods: {
        load(){
          this.$http({
            method: "GET",
            url: "http://localhost:8090/tCost",
          }).then(resp => {
            console.log(resp);
            this.ruleForm=resp.data.data.tCost;

          })
        },
        getAId(){
          this.ruleForm.orderId=this.$route.params.id;
        },
        price(){
          this.ruleForm.tranCost=this.ruleForm.pricecm*0.5*this.totalBulk+this.ruleForm.pricekg*0.5*this.totalWeight;
          this.ruleForm.totalCost=Number(this.ruleForm.tranCost)+Number(this.ruleForm.pickCost)+
          Number(this.ruleForm.loadCost)+Number(this.ruleForm.boxCost)+Number(this.ruleForm.safeCost);
        },
        submitForm(formName) {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              this.$http({
                method: "POST",
                url: "http://localhost:8090/tCost",
                data: this.ruleForm
              }).then(resp => {
                let id=this.ruleForm.orderId;
                alert(resp.data.msg);
                this.$router.push(`/home/creatorder/logistics/${id}`);
              })
            } else {
              console.log('error submit!!');
              return false;
            }
          });
        },
        resetForm(formName) {
          this.$refs[formName].resetFields();
        },
        countweight(){
          this.ruleForm.totalWeight=this.ruleForm.weight*this.ruleForm.number;

        },
        countbulk(){
          console.log(this.ruleForm.goodsLong);
          this.ruleForm.bulk=(this.ruleForm.goodsLong*this.ruleForm.goodsWide)*this.ruleForm.goodsHight;
          console.log(this.ruleForm.bulk);
          this.ruleForm.totalBulk= this.ruleForm.bulk*this.ruleForm.number;
        }
      },
      created() {
        this.getAId();
        this.load();
      }
    }
</script>

<style scoped>

</style>
